<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never" class="box-card">
        <!-- 标题部分 -->
        <div slot="header" class="clearfix">
          <span> {{ isEdit ? "试题修改" : "试题录入" }} </span>
        </div>
        <!-- 表单部分 -->
        <el-form
          ref="subForm"
          :rules="subRules"
          :model="subForm"
          label-width="120px"
        >
          <!-- 先使用父向子传值将subjectList传入子组件 -->
          <!--封装下拉组件,使用v-model双向绑定数据 -->
          <!-- 父级使用v-model绑定subjectID属性 -->
          <SelectMode
            v-model="subForm.subjectID"
            :rules-id="'subjectID'"
            label-name="学科: "
            :date-list="subjectList"
            @change.native="getcatalogList"
          />
          <SelectMode
            v-model="subForm.catalogID"
            :rules-id="'catalogID'"
            label-name="目录: "
            :date-list="catalogList"
          />
          <SelectMode
            v-model="subForm.enterpriseID"
            :rules-id="'enterpriseID'"
            label-name="企业: "
            :date-list="enterpriseList"
          />
          <el-form-item ref="cityInfo" label="城市: " prop="cityInfo">
            <citys v-model="cityInfo" />
          </el-form-item>
          <SelectMode
            v-model="subForm.direction"
            :rules-id="'direction'"
            label-name="方向: "
            :date-list="directionList"
          />
          <el-form-item label="题型: ">
            <el-radio-group
              v-model="subForm.questionType"
              @change="typeChangeFn"
            >
              <el-radio
                v-for="item in questionTypeList"
                :key="item.value"
                :label="`${item.value}`"
              >{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="难度: ">
            <el-radio-group v-model="subForm.difficulty">
              <el-radio
                v-for="item in difficultyList"
                :key="item.value"
                :label="`${item.value}`"
              >{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>

          <!-- 富文本编辑器 -->
          <el-form-item ref="question" label="题干: " prop="question">
            <quillEditor
              ref="queEditer"
              v-model="subForm.question"
              :options="editorOption"
              @change="validQuesFn"
            />
          </el-form-item>

          <!-- 选项部分 -->
          <!-- 将判断条件传入组件 -->
          <!-- 将options值也传入组件 -->
          <Check
            v-if="subForm.questionType !== '3'"
            v-model="check"
            :show-witch="subForm.questionType"
            :data-list="optionsList"
          />

          <!-- 按钮部分 -->
          <el-form-item v-if="subForm.questionType !== '3'">
            <el-button
              size="small"
              type="danger"
              :disabled="subForm.questionType === '1'"
              @click="addOptionFn"
            >+增加选项与答案</el-button>
          </el-form-item>
          <el-form-item label="解析视频: ">
            <el-input v-model="subForm.videoURL" style="width: 400px" />
          </el-form-item>

          <el-form-item ref="answer" label="答案解析: " prop="answer">
            <quillEditor
              ref="ansEditer"
              v-model="subForm.answer"
              :options="editorOption"
              @change="validAnswFn"
            />
          </el-form-item>

          <el-form-item label="题目备注">
            <el-input
              v-model="subForm.remarks"
              type="textarea"
              style="width: 400px"
            />
          </el-form-item>

          <SelectMode
            v-model="getTagsList"
            label-name="试题标签: "
            :date-list="TagList"
            :is-open="true"
          />
          <el-form-item>
            <el-button
              :type="isEdit ? 'success' : 'primary'"
              @click="onSubmit"
            >{{ isEdit ? "确认修改" : "确认提交" }}</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
// 引入接口
import { simple as getSubject } from '@/api/hmmm/subjects'
import { simple as getCatalog } from '@/api/hmmm/directorys'
import { list } from '@/api/hmmm/companys'
import { simple as getTag } from '@/api/hmmm/tags'
import {
  add as addQusetion,
  detail as reBackQuesList,
  update as editQusetion
} from '@/api/hmmm/questions'
// 引入下拉模块
import SelectMode from './companys/Select.vue'
// 引入城市模块
import citys from './companys/citys.vue'
// 引入方向列表
import { direction, questionType, difficulty } from '@/api/hmmm/constants'
// 引入二次封装的富文本编辑器
// import richQuill from './companys/richQuill.vue'
// 引入别人封装的富文本组件
// require styles
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'

// 引入自定选框组件
import Check from './companys/Check.vue'
export default {
  name: 'QuestionsNew',
  // 注册组件
  components: {
    SelectMode,
    citys,
    quillEditor,
    Check
  },
  data() {
    // 城市验证
    const validCity = (rule, value, callback) => {
      this.cityInfo.province && this.cityInfo.city
        ? callback()
        : callback(new Error('请选择地区'))
    }
    // 富文本题干验证
    const validQues = (rule, value, callback) => {
      value ? callback() : callback(new Error('请输入题干'))
    }
    // 富文本答案验证
    const validAnsw = (rule, value, callback) => {
      value ? callback() : callback(new Error('请输入题干'))
    }
    return {
      subForm: {
        subjectID: '', // 学科
        catalogID: '', // 目录
        enterpriseID: '', // 企业
        direction: '', // 方向
        questionType: '1', // 题型
        difficulty: '1', // 难度
        question: '', // 题干
        answer: '', // 答案解析
        videoURL: '', // 解析视频
        remarks: '', // 题目备注
        tags: '', // 试题标签
        options: [] // 选项
      },
      // 富文本配置项
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
            [{ list: 'ordered' }, { list: 'bullet' }], // 列表
            ['blockquote'], // 引用，代码块
            ['code-block', 'image', 'link'] // 上传图片、上传视频
          ]
        }
      },
      // 表单验证配置项
      subRules: {
        subjectID: [
          { required: true, message: '请选择学科', trigger: 'change' }
        ],
        catalogID: [
          { required: true, message: '请选择目录', trigger: 'change' }
        ],
        enterpriseID: [
          { required: true, message: '请选择企业', trigger: 'change' }
        ],
        direction: [
          { required: true, message: '请选择方向', trigger: 'change' }
        ],
        cityInfo: [{ required: true, validator: validCity, trigger: 'change' }],
        question: [{ required: true, validator: validQues, trigger: 'change' }],
        answer: [{ required: true, validator: validAnsw, trigger: 'change' }]
      },
      cityInfo: { city: '', province: '' }, // 城市信息,包括city和province,直接结构即可
      subjectList: [], // 学科列表
      catalogList: [], // 目录列表
      enterpriseList: [], // 企业列表
      directionList: [], // 方向列表
      questionTypeList: questionType, // 题型列表
      difficultyList: difficulty, // 难度列表
      TagList: [], // 试题标签列表
      getTagsList: [], // 试题标签用于双向绑定的数组
      optionsList: [
        { isRight: false, code: 'A', title: '', img: '' },
        { isRight: false, code: 'B', title: '', img: '' },
        { isRight: false, code: 'C', title: '', img: '' },
        { isRight: false, code: 'D', title: '', img: '' }
      ], // 选项数据
      check: '', // check组件内当前选中值
      isEdit: false, // 控制组件编辑/添加模式,默认添加模式
      pagesize: 50 // 控制请求回来的企业个数
    }
  },
  computed: {
    // 重新设置标签列表
    setTags() {
      return this.getTagsList.length ? this.getTagsList.join(',') : ''
    },
    // 设置选项数据
    setOptions() {
      return this.subForm.questionType === '1'
        ? this.optionsList.map((item) => ({
          isRight: item.code === this.check,
          code: item.code,
          title: item.title,
          img: item.img
        }))
        : this.optionsList
    },
    // 页面传入的id
    editId() {
      return this.$route.query.id
    }
  },
  watch: {
    // 当学科发生变化,获取目录列表
    'subForm.subjectID'() {
      // 调用获取目录方法
      this.getcatalogList()
      // 获取试题标签列表
      this.getTagList()
    },
    // 侦听计算属性setTags变化,将计算好的值赋到subForm里
    setTags() {
      this.subForm.tags = this.setTags
    },
    // 侦听setOptions的变化,将其赋值到options中
    setOptions() {
      this.subForm.options = this.setOptions
    },
    // 侦听传入的id变化
    editId() {
      // 修改编辑状态
      this.isEdit = !!this.$route.query.id
      // 如果编辑状态关闭，那么调用初始化列表
      if (!this.isEdit) {
        this.resetForm()
      }
    }
  },
  created() {
    // 判断是否传入了id
    // 如果传入了id,则开启编辑模式
    this.isEdit = !!this.$route.query.id
    // 获取学科列表
    this.getSubjectList()
    // 获取企业列表
    this.getenterpriseList()
    // 处理方向列表
    this.setdirectionList()
  },
  mounted() {
    if (this.isEdit) {
      this.$refs.ansEditer.quill.enable(false)
      this.$refs.queEditer.quill.enable(false)
      // 发送请求,获取回填数据
      this.reBackQuesListFn(this.editId)
    }
  },
  methods: {
    // 初始化列表的方法
    resetForm() {
      this.optionsList = [
        { isRight: false, code: 'A', title: '', img: '' },
        { isRight: false, code: 'B', title: '', img: '' },
        { isRight: false, code: 'C', title: '', img: '' },
        { isRight: false, code: 'D', title: '', img: '' }
      ]
      this.check = ''
      this.subForm.videoURL = ''
      this.subForm.remarks = ''
      this.subForm.questionType = '1'
      this.subForm.difficulty = '1'
      this.cityInfo = { city: '', province: '' }
      // 初始化表单验证验证
      this.$refs.subForm.resetFields()
      this.$nextTick(() => {
        this.$refs.cityInfo.resetField()
        this.$refs.question.resetField()
        this.$refs.answer.resetField()
      })
    },
    // 获取并回填数据的方法
    async reBackQuesListFn(id) {
      const res = await reBackQuesList(id)
      // // 简单回填不能全部回填到位,有一部分值需要手动回填
      // 城市部分回填
      this.cityInfo.city = res.data.city
      this.cityInfo.province = res.data.province
      // 新增判断,如果返回的数据中是简答题,则不执行options回填部分
      if (res.data.questionType !== '3') {
        // options回填
        // 处理顺序问题
        const sortArr = res.data.options.map((item) => item.code).sort()
        const sortOptionsList = [] // 声明新数组,用来获取排序后的 OptionsList
        sortArr.forEach((item) => {
          res.data.options.forEach((obj) => {
            if (obj.code === item) {
              sortOptionsList.push(obj)
            }
          })
        }) // 排序处理options
        // 改变isRight显示boolean
        this.optionsList = sortOptionsList.map((item) => ({
          isRight: item.isRight === 1,
          code: item.code,
          title: item.title,
          img: item.img
        })) // 回填部分数据
        const rightOne = this.optionsList.find((item) => item.isRight) // 找到对的那一个
        this.check = rightOne ? rightOne.code : '' // 找出正确答案回填回去
      }
      // 使用深拷贝,分开两组数据地址
      this.subForm = JSON.parse(JSON.stringify(res.data))
      this.$nextTick(() => {
        // 因为目录与试题标签需要等待学科回填完毕才会出现,所以添加nextTick让这两个值最后回填
        this.subForm.catalogID = res.data.catalogID
        // 试题标签回填
        this.getTagsList = res?.data?.tags ? res.data.tags.split(',') : []
      })
      // 富文本编辑器神坑处理
      this.$nextTick(function() {
        this.$refs.ansEditer.quill.enable(true)
        this.$refs.ansEditer.quill.blur()
        this.$refs.queEditer.quill.enable(true)
        this.$refs.queEditer.quill.blur()
      })
    },
    // 获取学科列表
    async getSubjectList() {
      const res = await getSubject()
      this.subjectList = res.data
    },
    // 获取目录列表
    async getcatalogList() {
      this.subForm.catalogID = ''
      const res = await getCatalog({ subjectID: this.subForm.subjectID })
      this.catalogList = res.data
    },
    // 获取企业列表
    async getenterpriseList() {
      const res = await list({ pagesize: this.pagesize })
      // 简化企业数据并赋值
      this.enterpriseList = res.data.items.map((item) => ({
        label: item.company,
        value: item.id
      }))
    },
    // 整理方向列表数据
    setdirectionList() {
      this.directionList = direction.map((item) => ({
        label: item,
        value: item
      }))
    },
    // 获取试题标签列表
    async getTagList() {
      this.getTagsList = []
      const res = await getTag({ subjectID: this.subForm.subjectID })
      // 处理标签列表
      this.TagList = res.data.map((item) => ({
        label: item.label,
        value: item.label
      }))
    },
    // 点击增加按钮增加一条选项
    addOptionFn() {
      // 获取当前optionsList的下标
      const index = this.optionsList.length
      // 声明一个对象
      const obj = { isRight: false, code: '', title: '', img: '' }
      // 让这个对象的code动态赋值
      obj.code = String.fromCharCode('A'.charCodeAt(0) + index)
      // 追加到选项列表中
      this.optionsList.push(obj)
    },
    // 题型单选改变时
    typeChangeFn(val) {
      // 如果为单选,复原4个选项
      if (val === '1') {
        this.optionsList = [
          { isRight: false, code: 'A', title: '', img: '' },
          { isRight: false, code: 'B', title: '', img: '' },
          { isRight: false, code: 'C', title: '', img: '' },
          { isRight: false, code: 'D', title: '', img: '' }
        ]
      }
    },
    // 验证题干富文本
    validQuesFn() {
      this.$refs.subForm.validateField('question')
    },
    // 验证答案富文本
    validAnswFn() {
      this.$refs.subForm.validateField('answer')
    },
    // 点击确认提交
    onSubmit() {
      // 兜底验证
      this.$refs.subForm.validate(async(valid) => {
        if (!valid) return
        // 调用提交接口
        this.isEdit
          ? await editQusetion(this.subForm)
          : await addQusetion({ ...this.cityInfo, ...this.subForm })
        this.$message.success(this.isEdit ? '修改试题成功' : '添加试题成功')
        this.isEdit
          ? this.$router.back()
          : this.$router.push('/questions/list')
      })
    }
  }
}
</script>

<style scoped lang='scss'>
::v-deep textarea.el-textarea__inner {
  height: 100px;
}
::v-deep .ql-editor {
  height: 200px;
}
::v-deep .ql-toolbar.ql-snow {
  padding: 0 10px;
}
</style>
